<template>
<div>
    <!--触发click事件 -->
     <!-- <button type="button" name="buttonAdd"  @click="$store.commit('switch_mut')">使用mutations改变show的状态</button><br/>
    <p></p>
    <button type="button" name="buttonAdd"  @click="$store.dispatch('switch_act')">使用actions改变show的状态</button><br/>
    <p></p>  -->
    <!--使用mapState,mapGetters,mapActions,mapMutations辅助函数 -->
    <!--由于使用了状态管理vuex,即:show='show'不再需要  -->
    <!-- <button type="button" name="buttonAdd"  @click="changeMut" :show="show">使用mutations改变show的状态</button><br/> -->
    <button type="button" name="buttonAdd"  @click="changeMut">使用mutations改变show的状态</button><br/>
    <p></p>
    <button type="button" name="buttonAdd" @click="changeAct">使用actions改变show的状态</button><br/>
    <p></p>
    <!--引用子组件 -->
    <my-dialog ></my-dialog>
    <p></p>
    <!--改变父类的值 -->
    <div>父类的值被改变为：{{show}}</div>
    <p></p>
    <div>父类中使用mapState展示我的名字：{{name}}</div>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'Vuex'; //模块大小写问题
import dialog from './dialog.vue';
export default {
    data(){
        return {
         
        }
    },
    components: {
        'myDialog':dialog
    },
    //解决vuex的刷新,获取最新的状态仓库值而不是初始化值
    computed: {
        //这里的三点叫做 : 扩展运算符
        ...mapState({
            //刷新浏览器获取state中的最新值：方法一
            // show: function(state){ //computed中如果要获取this指向，不可以使用箭头函数
            //   console.log('父组件使用show方法state.compute.show的值 ',state.compute.show);
            //   console.log(this.$store);
            //   //初始化为空的时候
            //    if(this.$store.state.compute.show){
            //     this.$store.commit('getStorage_mut');     
            //     console.log('触发点击mutations事件从session中获取state的值： ', this.$store.state.compute.show);
            //    }
            //   return this.$store.state.compute.show;
            // }, 
            show: state => state.compute.show,
            name: state => state.compute.name
        }),
        // ...mapGetters({
        //   show: 'show'
        // })
    },
   methods:{
    ...mapMutations({
       changeMut: 'switch_mut' // 映射this.changeMut() 为 this.$store.commit('switch_mut')
    }),
    ...mapActions({
       changeAct: 'switch_act'
    })
   },
   mounted() {
     //刷新浏览器获取state中的最新值：方法二
     this.$store.commit('getStorage_mut');     
   } 
}
</script>

<style>

</style>